<!doctype html>
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
<meta name="layout" content="common">
<title>Report</title>
<script src="${resource(dir:'js', file:'highcharts.js') }"></script>
</head>
<body>
	<h2>Spending Reports</h2>
	<hr />
	<div class="criteria-column pull-left">
		<h3>Criteria</h3>
		<br /> <b>Cards</b>
		<form method="GET"
			action="<g:createLink controller="report" />">
			<table class="table table-striped">
				<g:each var="card" in="${allCards }">
				<g:if test="${cardSet.contains("" + card.id) }">
					<tr>
						<td><input type="checkbox" name="card_id" value="${card.id }" checked/>
							${card.bank.name } - ${card.brand }</td>
					</tr>
				</g:if>
				<g:else>
					<tr>
						<td><input type="checkbox" name="card_id" value="${card.id }" />
							${card.bank.name } - ${card.brand }</td>
					</tr>
				</g:else>
				</g:each>
			</table>
			<br /> <b>Report Date (Within 3 months)</b>
			<p></p>

			<div class="input-append date" id="from-date"
				data-date="${dateFormat.format(fromDate) }"
				data-date-format="dd-mm-yyyy">
				<input class="span2" type="text"
					value="${dateFormat.format(fromDate) }" name="from_date" readonly>
				<span class="add-on" style="height: 30px;"><i
					class="icon-calendar"></i></span>
			</div>
			<div class="input-append date" id="to-date"
				data-date="${dateFormat.format(toDate) }"
				data-date-format="dd-mm-yyyy">
				<input class="span2" type="text"
					value="${dateFormat.format(toDate) }" name="to_date" readonly>
				<span class="add-on" style="height: 30px;"><i
					class="icon-calendar"></i></span>
			</div>
			<p></p>
			<button class="btn" type="submit">Update</button>
			<p></p>
		</form>
		<br /> <b>Report type</b>
		<form id="report-type">
			<table class="table table-striped">
				<tr>
					<td><input type="radio" name="report_type"
						value="card_spending" /> Card Spending</td>
				</tr>
				<tr>
					<td><input type="radio" name="report_type"
						value="monthly_spending" /> Category Spending Detail</td>
				</tr>
				<tr>
					<td><input type="radio" name="report_type"
						value="category_spending" /> Overall Category Spending</td>
				</tr>
			</table>
		</form>

	</div>
	<div class="chart-column pull-left">
		<h3>Charts</h3>
		<div style="width: 100%; position: relative;">
			<div></div>
			<div id="chart_div" style="height: 500px;"></div>
			<div id="category_of_card_chart_div" style="height: 500px;" class="center"></div>
			<div id="category_chart_div" style="height: 500px;" class="center"></div>
		</div>
		<div>
			<table cellpadding="0" cellspacing="0" border="0"
				class="display table table-striped" id="example">
				<thead>
					<tr>
						<th>Date</th>
						<th>Merchant</th>
						<th>Amount</th>
						<th>Card</th>
						<th>Category</th>
					</tr>
				</thead>
				<tbody>
					<g:each in="${transactions}" var="transaction">
						<tr class="gradeA" id="transaction-row-${transaction.id }">
							<td>
								${dateFormat.format(transaction.txnDate) }
							</td>
							<td>
								${transaction.merchant.name }
							</td>
							<td>
								${transaction.amount }
							</td>
							<td class="center"><b> ${transaction.card.bank.name } - ${transaction.card.brand }
							</b> (****${transaction.card.maskNumber() })</td>


							<td>
								${transactionCategoryService.getCategory(transaction).name}
							</td>
						</tr>
					</g:each>
				</tbody>
				<tfoot>
					<tr>
						<th>Date</th>
						<th>Merchant</th>
						<th>Amount</th>
						<th>Card</th>
						<th>Category</th>
					</tr>
				</tfoot>
			</table>
		</div>
	</div>
	<script type="text/javascript">
		MC.monthlySpending =
	${monthlySpending}
		;

		MC.categorySpending =
	${categorySpending}
		;

		MC.categorySpendingForCards = ${categorySpendingForCards};
	</script>

	<!-- App -->
	<script src="${resource(dir:'js/app', file:'chart_mod.js') }"></script>
	<script src="${resource(dir:'js/app', file:'dashboard_mod.js') }"></script>
	<script src="${resource(dir:'js/app', file:'report_mod.js') }"></script>
</body>
</html>